<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Welcome to Design Zone......</title>
<link rel="stylesheet" type="text/css"
	href="../../scripts/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
	href="../../scripts/ext/resources/css/file-upload.css" />
<link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
<script type="text/javascript"
	src="../../scripts/ext/adapter/ext-base.js">
        </script>
<script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
<script type="text/javascript" src="../../scripts/menu/EditableItem.js">
        </script>
<script type="text/javascript" src="../../scripts/menu/RangeMenu.js">
        </script>
<script type="text/javascript" src="../../scripts/grid/GridFilters.js">
        </script>
<script type="text/javascript" src="../../scripts/grid/filter/Filter.js">
        </script>
<script type="text/javascript"
	src="../../scripts/grid/filter/StringFilter.js">
        </script>
<script type="text/javascript"
	src="../../scripts/grid/filter/DateFilter.js"></script>
<script type="text/javascript"
	src="../../scripts/grid/filter/ListFilter.js"></script>
<script type="text/javascript"
	src="../../scripts/form/FileUploadField.js">
        </script>
<script type="text/javascript" src="../../scripts/grid/RowExpander.js">
        </script>
<script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
<script type="text/javascript" src="../../scripts/utils.js">
        </script>
<script type="text/javascript" src="../../scripts/selectPantone.js">
        </script>
<script type="text/javascript" src="../../scripts/selectBiFactory.js">
        </script>
<script type="text/javascript" src="../../scripts/selectBiFranceCustomer.js">
        </script>
<script type="text/javascript" src="../../scripts/selectYarn.js">
        </script>
<script type="text/javascript" src="../../scripts/selectDzColor.js">
        </script>
<script type="text/javascript" src="../../scripts/imageViewer.js"></script>
<script type="text/javascript">
            var dzColorMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.dzcolor');
            var orderMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.order');
            var pantoneMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.pantonecolor');
			var yarnMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.yarn');
			var customerMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
			var fMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.factory');
			var fcMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
			
			var customerXmlLoader = new xmlLoader('../../servlet/BiFranceCustomerServlet?action=5');
			var ctYarnMaterialXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtYarnMaterial');
			var ctDyeingXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtDyeing');
			var ctFilsTypeXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtFilsType');
			var ctColorFamilyXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtColorFamily');
			var ctColorTypeXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtColorType');
			var ctSeasonNumberXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtSeasonNumber');
			var ctSendByXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtSendBy');
            var ctYesnoXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtYesno');
			
			var dzColorForm;
			
			var customerStore;
			var ctYarnMaterialStore;
			var ctDyeingStore;
			var ctFilsTypeStore;
			var ctColorFamilyStore;
			var ctColorTypeStore;
			var ctSeasonNumberStore;
			var ctSendByStore;
			var ctYesnoStore;
			
			//var customerCombo;
			var ctYarnMaterialCombo;
			var ctDyeingCombo;
			var ctFilsTypeCombo;
			var ctColorFamilyCombo;
			var ctColorTypeCombo;
			var ctSeasonNumberCombo;
			var ctSendBy1Combo;
			var ctSendBy2Combo;
			var isApprovied1Combo;
			var isApprovied2Combo;
			var isNewCombo;
			var selectedYarn;
			
			var selectYarnCallback = function(yarnId, yarnReference, factoryName, ctYarnMaterial1, ctYarnMaterial2, ctYarnMaterial3, ctYarnMaterial4, ctYarnMaterial5){
				//alert(yarnId + ' ' + factoryName + ' ' +yarnReference+ ' ' +ctYarnMaterial1+ ' ' +ctYarnMaterial2+ ' ' +ctYarnMaterial3+ ' ' +ctYarnMaterial4+ ' ' +ctYarnMaterial5);
				document.getElementById('yarnId').value = yarnId;
				document.getElementById('yarnReference').value = yarnReference;
				document.getElementById('factoryNameCN').value = selectedYarn['biFactory.nameCN'];
				document.getElementById('factoryNameEN').value = selectedYarn['biFactory.nameEN'];
				document.getElementById('ctYarnMaterial1').value = ctYarnMaterial1;
				document.getElementById('ctYarnMaterial2').value = ctYarnMaterial2;
				document.getElementById('ctYarnMaterial3').value = ctYarnMaterial3;
				document.getElementById('ctYarnMaterial4').value = ctYarnMaterial4;
				document.getElementById('ctYarnMaterial5').value = ctYarnMaterial5;
				//alert(selectedYarn['biFactory.nameCN']);
			}
			
			var selectFranceCustomerCallback = function(customerId, customerName, customerDepartment){
                document.getElementById('customerId').value = customerId;
                document.getElementById('customerName').value = customerName;
                document.getElementById('customerDepartment').value = customerDepartment;
            }
			
			var selectPantoneCallback = function(pantone, realColor){
                document.getElementById('pantoneNumber').value = pantone;
                document.getElementById('realColor').value = realColor;
                document.getElementById('sampleTable').style['backgroundColor'] = '#' + realColor;
            }
			
			var selectDZColorCallback = function(dzColorId){
				var colorId = Ext.getCmp('id').getValue();
				var ctSeasonNumber = ctSeasonNumberCombo.getValue();
				var isNew = isNewCombo.getValue();
				dzColorForm.getForm().load({
                        url: '../../servlet/BiDZColorServlet?action=3&id=' + dzColorId,
                        waitMsg: Ext.LoadMask.prototype.msg,
                        success: function(form, action){
                            document.getElementById('customImg').src =  '../../_temp/' + document.getElementById('photo1Name').value;
							document.getElementById('customImg1').src =  '../../_temp/' + document.getElementById('photo2Name').value;
							var realColor = document.getElementById('realColor').value;
							if(realColor){
								document.getElementById('sampleTable').style['backgroundColor'] = '#' + realColor;
							}
							Ext.getCmp('oldId').setValue(dzColorId);
							Ext.getCmp('id').setValue(colorId);
							ctColorTypeCombo.fireEvent('select');
							ctSeasonNumberCombo.setValue(ctSeasonNumber);
							isNewCombo.setValue(isNew);
                        }
                    });
			}
			
			var setDZColorCode = function(){
				var ctYarnMaterial = ctYarnMaterialCombo.getRawValue();
				var ctColorFamily = ctColorFamilyCombo.getRawValue();
				var ctFilsType = ctFilsTypeCombo.getRawValue();
				var isNew = isNewCombo.getValue();
				//alert(ctYarnMaterial + ' ' + ctColorFamily + ' ' + ctFilsType);
				if(ctYarnMaterial == '' || ctColorFamily == '' || ctFilsType == '' || isNew == ''){
					//dzColorForm.getForm().isValid();
					return;
				}
				
				if(isNew == '02'){
					selectDZColor(selectDZColorCallback, ctYarnMaterialCombo.getValue(), ctColorFamilyCombo.getValue(), ctFilsTypeCombo.getValue());
					return;					
				}
				
				var maxColorCodeIndextXmlLoader = new xmlLoader('../../servlet/BiDZColorServlet?action=10&ctYarnMaterial=' + ctYarnMaterialCombo.getValue() + '&ctColorFamily=' + ctColorFamilyCombo.getValue() + '&ctFilsType=' + ctFilsTypeCombo.getValue());
				var maxIndex = maxColorCodeIndextXmlLoader.getValueByTagName('item');
				document.getElementById('dzColorCodeIndex').value = maxIndex;

				var equalIndex = ctYarnMaterial.indexOf('=');
				document.getElementById('dzColorCode').value = 
					ctYarnMaterial.substring(equalIndex + 2) + '-' + 
					ctColorFamily.substring(ctColorFamily.length-2) + '-' +
					ctFilsType.substring(ctFilsType.length-1) + '-' +  
					maxIndex;
			}
            
            Ext.onReady(function(){
                Ext.QuickTips.init();
                
                Ext.form.Field.prototype.msgTarget = 'side';
                
                var idValue = getPrarmeterValue(window.location, 'id');
                var startPage = getPrarmeterValue(window.location, 'startPage');
                
                var idValue = getPrarmeterValue(window.location, 'id');
                var startPage = getPrarmeterValue(window.location, 'startPage');
				
				customerStore = new Ext.data.Store({
                
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'id',
                        totalRecords: 'itemTotal'
                    }, ['id', 'name', 'department']),
                    data: customerXmlLoader.getXml()
                });
				
				ctYarnMaterialStore = new Ext.data.Store({
                   
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, [
                    'code', 'description']),
					data: ctYarnMaterialXmlLoader.getXml()
                });
				
				ctDyeingStore = new Ext.data.Store({
                   
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, [
                    'code', 'description']),
					data: ctDyeingXmlLoader.getXml()
                });
				
				ctFilsTypeStore = new Ext.data.Store({
                   
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, [
                    'code', 'description']),
					data: ctFilsTypeXmlLoader.getXml()
                });
				
				ctColorFamilyStore = new Ext.data.Store({
                   
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, [
                    'code', 'description']),
					data: ctColorFamilyXmlLoader.getXml()
                });
				
				ctColorTypeStore = new Ext.data.Store({
                   
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, [
                    'code', 'description']),
					data: ctColorTypeXmlLoader.getXml()
                });
				
				ctSeasonNumberStore = new Ext.data.Store({
                   
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, [
                    'code', 'description']),
					data: ctSeasonNumberXmlLoader.getXml()
                });
				
				ctSendByStore = new Ext.data.Store({
                   
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, [
                    'code', 'description']),
					data: ctSendByXmlLoader.getXml()
                });
				
				ctYesnoStore = new Ext.data.Store({
                   
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, [
                    'code', 'description']),
					data: ctYesnoXmlLoader.getXml()
                });
				/*
				customerCombo = new Ext.form.ComboBox({
                    fieldLabel: message.get('message.edit.customername'),
                    id: 'customerId',
                    name: 'customerId',
                    allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
                    tpl: '<tpl for="."><div class="x-combo-list-item">{name}&nbsp;&nbsp;--&nbsp;&nbsp;{department}</div></tpl>',
                    valueField: 'id',
                    store: customerStore,
                    displayField: 'name',
                    forceSelection: true,
                    triggerAction: 'all',
                    emptyText: message.get('message.combo.pleaseselect'),
                    selectOnFocus: true,
                    mode: 'local',
					anchor: '90%'
                });*/
				
				ctYarnMaterialCombo = new Ext.form.ComboBox({
					fieldLabel: yarnMessage.get('ui.yarn.material'),
					id: 'ctYarnMaterial',
					name: 'ctYarnMaterial',
					allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
					editable: true,
					forceSelection: true,
					valueField: 'code',
				    store: ctYarnMaterialStore,
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					mode: 'local',
					anchor: '90%',
					listeners: {
						select: {
							fn: function (thisCombo, record,index){
								setDZColorCode();
							}
						}
					}
				});
				
				ctDyeingCombo = new Ext.form.ComboBox({
					fieldLabel: fMessage.get('ui.factory.dyeing'),
					id: 'ctDyeing',
					name: 'ctDyeing',
					allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
					editable: false,
					valueField: 'code',
				    store: ctDyeingStore,
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					mode: 'local',
					anchor: '90%'
				});
				
				ctFilsTypeCombo = new Ext.form.ComboBox({
					fieldLabel: dzColorMessage.get('ui.dzcolor.yarntype'),
					id: 'ctFilsType',
					name: 'ctFilsType',
					allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
					editable: false,
					valueField: 'code',
				    store: ctFilsTypeStore,
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					mode: 'local',
					anchor: '90%',
					listeners: {
						select: {
							fn: function (thisCombo, record,index){
								setDZColorCode();
							}
						}
					}
				});
				
				ctColorFamilyCombo = new Ext.form.ComboBox({
					fieldLabel: dzColorMessage.get('ui.dzcolor.colorfamily'),
					id: 'ctColorFamily',
					name: 'ctColorFamily',
					allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
					editable: false,
					valueField: 'code',
				    store: ctColorFamilyStore,
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					mode: 'local',
					anchor: '90%',
					listeners: {
						select: {
							fn: function (thisCombo, record,index){
								setDZColorCode();
							}
						}
					}
				});
				
				ctColorTypeCombo = new Ext.form.ComboBox({
					fieldLabel: dzColorMessage.get('ui.dzcolor.type'),
					id: 'ctColorType',
					name: 'ctColorType',
					allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
					editable: false,
					valueField: 'code',
				    store: ctColorTypeStore,
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					mode: 'local',
					anchor: '90%',
                    listeners: {
                        select: {
                            fn: function(thisCombo, record, index){
                            	if(ctColorTypeCombo.getValue() == '01'){//客户样本
                            		Ext.getCmp('pantoneNumber').disable();
                            		Ext.getCmp('realColor').disable();
                            		
                            		//Ext.getCmp('supplierNumber').disable();
                            		//Ext.getCmp('photo1').disable();
                            		
                            		Ext.getCmp('customerColorCode').enable();
                            		Ext.getCmp('photo2').enable();
                            	}else if(ctColorTypeCombo.getValue() == '02'){//Pantone
                            		Ext.getCmp('pantoneNumber').enable();
                            		Ext.getCmp('realColor').enable();
                            		
									Ext.getCmp('customerColorCode').enable();
									Ext.getCmp('photo2').enable();
                            		
                            		Ext.getCmp('supplierNumber').disable();
                            		Ext.getCmp('photo1').disable();
                            		
                            		//Ext.getCmp('customerColorCode').disable();
                            		//Ext.getCmp('photo2').disable();
                            	}else{//提供商、工厂
                            		Ext.getCmp('pantoneNumber').disable();
                            		Ext.getCmp('realColor').disable();
                            		
                            		Ext.getCmp('supplierNumber').enable();
                            		Ext.getCmp('photo1').enable();
                            		
                            		//Ext.getCmp('customerColorCode').disable();
                            		//Ext.getCmp('photo2').disable();
                            	}
                            }
                        }
                   }
				});
				
				ctSeasonNumberCombo = new Ext.form.ComboBox({
					fieldLabel: dzColorMessage.get('ui.dzcolor.seasonnumber'),
					id: 'ctSeasonNumber',
					name: 'ctSeasonNumber',
					allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
					editable: false,
					valueField: 'code',
				    store: ctSeasonNumberStore,
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					mode: 'local',
					anchor: '90%'
				});
				
				ctSendBy1Combo = new Ext.form.ComboBox({
					fieldLabel: dzColorMessage.get('ui.dzcolor.sentby'),
					id: 'ctSendBy1',
					name: 'ctSendBy1',
					editable: false,
					valueField: 'code',
				    store: ctSendByStore,
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					mode: 'local',
					anchor: '90%'
				});
				
				ctSendBy2Combo = new Ext.form.ComboBox({
					fieldLabel: dzColorMessage.get('ui.dzcolor.sentby'),
					id: 'ctSendBy2',
					name: 'ctSendBy2',
					editable: false,
					valueField: 'code',
				    store: ctSendByStore,
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					mode: 'local',
					anchor: '90%'
				});
				
				isNewCombo = new Ext.form.ComboBox({
					fieldLabel: dzColorMessage.get('ui.dzcolor.isnew'),
					id: 'isNew',
					name: 'isNew',
					editable: false,
					valueField: 'code',
				    store: ctYesnoStore,
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
					allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
				    selectOnFocus:true,
					mode: 'local',
					anchor: '90%',
					listeners: {
						select: {
							fn: function (thisCombo, record,index){
								setDZColorCode();
							}
						}
					}
				});
				
				isApprovied1Combo = new Ext.form.ComboBox({
					fieldLabel: dzColorMessage.get('ui.dzcolor.isapproved'),
					id: 'isApprovied1',
					name: 'isApprovied1',
					editable: false,
					valueField: 'code',
				    store: ctYesnoStore,
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					mode: 'local',
					anchor: '90%'
				});
				
				isApprovied2Combo = new Ext.form.ComboBox({
					fieldLabel: dzColorMessage.get('ui.dzcolor.isapproved'),
					id: 'isApprovied2',
					name: 'isApprovied2',
					editable: false,
					valueField: 'code',
				    store: ctYesnoStore,
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					mode: 'local',
					anchor: '90%'
				});
				
				
                
                dzColorForm = new Ext.FormPanel({
					fileUpload: true,
                    labelAlign: 'left',
                    url: '../../servlet/BiDZColorServlet?action=1',
                    frame: true,
                    title: dzColorMessage.get('ui.dzcolor.edittitle'),
                    bodyStyle: 'padding:5px 5px 5px 5px;margin-top: 2px;',
                    width: '100%',
                    labelWidth: 135,
                    reader: new Ext.data.XmlReader({
                        record: 'item'
                    }, [{
                        name: 'id',
                        mapping: 'id'
                    },{
						name: 'customerId',
						mapping: 'customerId'
					},{
						name: 'customerName',
						mapping: 'customerName'
					},{
						name: 'customerDepartment',
						mapping: 'customerDepartment'
					},{
						name: 'yarnId',
						mapping: 'yarnId'
					},{
						name: 'yarnReference',
						mapping: 'yarnReference'
					},{
						name: 'factoryId',
						mapping: 'factoryId'
					},{
						name: 'factoryNameCN',
						mapping: 'factoryNameCN'
					},{
						name: 'factoryNameEN',
						mapping: 'factoryNameEN'
					},{
						name: 'ctYarnMaterial',
						mapping: 'ctYarnMaterial'
					},{
						name: 'ctDyeing',
						mapping: 'ctDyeing'
					},{
						name: 'ctFilsType',
						mapping: 'ctFilsType'
					},{
						name: 'customerColorCode',
						mapping: 'customerColorCode'
					},{
						name: 'ctColorFamily',
						mapping: 'ctColorFamily'
					},{
						name: 'dzColorCode',
						mapping: 'dzColorCode'
					},{
						name: 'dzColorCodeIndex',
						mapping: 'dzColorCodeIndex'
					},{
						name: 'ctColorType',
						mapping: 'ctColorType'
					},{
						name: 'pantoneNumber',
						mapping: 'pantoneNumber'
					},{
						name: 'realColor',
						mapping: 'realColor'
					},{
						name: 'supplierNumber',
						mapping: 'supplierNumber'
					},{
						name: 'ctSeasonNumber',
						mapping: 'ctSeasonNumber'
					},{
						name: 'launchDate',
						mapping: 'launchDate'
					},{
						name: 'targetDate1',
						mapping: 'targetDate1'
					},{
						name: 'ctSendBy1',
						mapping: 'ctSendBy1'
					},{
						name: 'sendByComment1',
						mapping: 'sendByComment1'
					},{
						name: 'shippingDate1',
						mapping: 'shippingDate1'
					},{
						name: 'receiptDate1',
						mapping: 'receiptDate1'
					},{
						name: 'comfirmDate1',
						mapping: 'comfirmDate1'
					},{
						name: 'isApprovied1',
						mapping: 'isApprovied1'
					},{
						name: 'approvedDate1',
						mapping: 'approvedDate1'
					},{
						name: 'colorTestNumber1',
						mapping: 'colorTestNumber1'
					},{
						name: 'factoryReference1',
						mapping: 'factoryReference1'
					},{
						name: 'targetDate2',
						mapping: 'targetDate2'
					},{
						name: 'ctSendBy2',
						mapping: 'ctSendBy2'
					},{
						name: 'sendByComment2',
						mapping: 'sendByComment2'
					},{
						name: 'shippingDate2',
						mapping: 'shippingDate2'
					},{
						name: 'receiptDate2',
						mapping: 'receiptDate2'
					},{
						name: 'comfirmDate2',
						mapping: 'comfirmDate2'
					},{
						name: 'isApprovied2',
						mapping: 'isApprovied2'
					},{
						name: 'approvedDate2',
						mapping: 'approvedDate2'
					},{
						name: 'colorTestNumber2',
						mapping: 'colorTestNumber2'
					},{
						name: 'factoryReference2',
						mapping: 'factoryReference2'
					},{
						name: 'ctYarnMaterial1',
						mapping: 'ctYarnMaterial1'
					},{
						name: 'ctYarnMaterial2',
						mapping: 'ctYarnMaterial2'
					},{
						name: 'ctYarnMaterial3',
						mapping: 'ctYarnMaterial3'
					},{
						name: 'ctYarnMaterial4',
						mapping: 'ctYarnMaterial4'
					},{
						name: 'ctYarnMaterial5',
						mapping: 'ctYarnMaterial5'
					},{
						name: 'photo1Name',
						mapping: 'photo1Name'
					},{
						name: 'photo2Name',
						mapping: 'photo2Name'
					},{
						name: 'photo3Name',
						mapping: 'photo3Name'
					},{
                        name: 'isNew',
                        mapping: 'isNew'
                    },{
                        name: 'oldId',
                        mapping: 'oldId'
                    }]),
                    items: [{
                        id: 'id',
                        name: 'id',
                        xtype: 'hidden'
                    },{
                        id: 'oldId',
                        name: 'oldId',
                        xtype: 'hidden'
                    },{
                        id: 'dzColorCodeIndex',
                        name: 'dzColorCodeIndex',
                        xtype: 'hidden'
                    },{
                        id: 'factoryId',
                        name: 'factoryId',
                        xtype: 'hidden'
                    },{
                        id: 'customerId',
                        name: 'customerId',
                        xtype: 'hidden'
                    },{
                        id: 'yarnId',
                        name: 'yarnId',
                        xtype: 'hidden'
                    },{
                        id: 'realColor',
                        name: 'realColor',
                        xtype: 'hidden'
                    },{
                        id: 'photo1Name',
                        name: 'photo1Name',
                        xtype: 'hidden'
                    },{
                        id: 'photo2Name',
                        name: 'photo2Name',
                        xtype: 'hidden'
                    },{
                        id: 'photo3Name',
                        name: 'photo3Name',
                        xtype: 'hidden'
                    },{
							layout: 'column',
							items: [{
								columnWidth:.3,
				                layout: 'form',
								items: [isNewCombo, ctYarnMaterialCombo,ctColorTypeCombo,ctDyeingCombo]
							},{
								columnWidth:.3,
				                layout: 'form',
								items: [ctSeasonNumberCombo,ctColorFamilyCombo,{
                                    id: 'customerName',
                                    name: 'customerName',
                                    fieldLabel: message.get('message.edit.customername'),
                                    xtype: 'textfield',
                                    anchor: '86%',
                                    allowBlank: false,
                                    blankText: message.get('message.edit.noblank'),
                                    emptyText: message.get('message.combo.pleaseselect'),
                                    readOnly: true,
                                    maxLength: 64,
                                    listeners: {
                                        'render': {
                                            fn: function(){
                                                Ext.getCmp('customerName').getEl().on('click', function(){
                                                    selectFranceCustomer(selectFranceCustomerCallback);
                                                }, this);
                                            },
                                            scope: this
                                        }
                                    }
                                },{
		                          id: 'pantoneNumber',
		                          name: 'pantoneNumber',
		                          xtype: 'textfield',
		                          fieldLabel: pantoneMessage.get('ui.pantonecolor.number'),
		                          anchor: '86%',
								  width: '90%',
		                          maxLength: 128,
		                          maxLengthText: message.get('message.edit.toolong'),
		                          emptyText: message.get('message.combo.pleaseselect'),
		                          listeners: {
                                        'render': {
                                            fn: function(){
                                                Ext.getCmp('pantoneNumber').getEl().on('click', function(){
                                                    selectPantone();
                                                }, this);
                                            },
                                            scope: this
                                        }
                                   }
		                      },{
		                          id: 'supplierNumber',
		                          name: 'supplierNumber',
		                          xtype: 'textfield',
		                          fieldLabel: dzColorMessage.get('ui.dzcolor.factorycolorcode'),
		                          anchor: '86%',
								  width: '90%',
		                          maxLength: 128,
		                          allowBlank: false,
		                          maxLengthText: message.get('message.edit.toolong')
		                      },{
									id: 'customerColorCode',
                                    name: 'customerColorCode',
                                    fieldLabel: dzColorMessage.get('ui.dzcolor.customercolorcode'),
                                    xtype: 'textfield',
                                    anchor: '86%',
									width: '90%',
                                    allowBlank: false,
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 256
                                }]
							},{
								columnWidth:.3,
				                layout: 'form',
								items: [{
	                                html: '<div class="div"><label class="x-form-item-label">&nbsp;</label></div><br/>'
	                            },ctFilsTypeCombo,{
                                    xtype: 'textfield',
                                    fieldLabel: fcMessage.get('ui.francecustomer.department'),
                                    id: 'customerDepartment',
                                    name: 'customerDepartment',
                                    anchor: '86%',
                                    allowBlank: true,
                                    blankText: message.get('message.edit.noblank'),
                                    readOnly: true,
                                    maxLength: 64,
                                    tabIndex: 1
                                },{
                                    html: '<table><tr><td width="125">' +
                                    colorMessage.get('ui.pantonecolor.realcolor') +
                                    ': </td><td><table id="sampleTable" width="60" ><tr height="15"><td>&nbsp;</td></tr></table></td></tr></table>'
                                },{
									xtype: 'fileuploadfield',
									width: '80%',
						            id: 'photo1',
									name: 'photo1',
						            emptyText: message.get('message.edit.selectimage'),
						            fieldLabel: dzColorMessage.get('ui.dzcolor.supplierpic'),
						            buttonCfg: {
						                text: '',
						                iconCls: 'uploadIcon'
					            	}
								},{
									xtype: 'fileuploadfield',
									width: '80%',
						            id: 'photo2',
									name: 'photo2',
						            emptyText: message.get('message.edit.selectimage'),
						            fieldLabel: dzColorMessage.get('ui.dzcolor.customerpic'),
						            buttonCfg: {
						                text: '',
						                iconCls: 'uploadIcon'
					            	}
								}]
							}]
                    },{
						xtype: 'fieldset',
						collapsible: true,
						title: yarnMessage.get('ui.yarn.composition'),
						autoHeight: true,
						items: [{
                            layout: 'column',
                            items: [{
                                columnWidth: .33,
                                layout: 'form',
                                items: [{
	                                id: 'yarnReference',
	                                name: 'yarnReference',
	                                xtype: 'textfield',
	                                fieldLabel: yarnMessage.get('ui.yarn.reference'),
	                                anchor: '86%',
									width: '90%',
	                                allowBlank: false,
	                                blankText: message.get('message.edit.noblank'),
									emptyText: message.get('message.combo.pleaseselect'),
	                                maxLength: 64,
	                                maxLengthText: message.get('message.edit.toolong'),
									readOnly: true,
	                                listeners: {
	                                    'render': {
	                                        fn: function(){
	                                            Ext.getCmp('yarnReference').getEl().on('click', function(){
	                                                selectYarn();
	                                            }, this);
	                                        },
	                                        scope: this
	                                    }
	                                }
	                            },{
	                                id: 'ctYarnMaterial1',
	                                name: 'ctYarnMaterial1',
	                                xtype: 'textfield',
	                                fieldLabel: yarnMessage.get('ui.yarn.material') + '1',
	                                anchor: '86%',
									width: '90%',
	                                maxLength: 64,
	                                maxLengthText: message.get('message.edit.toolong'),
									readOnly: true
	                            },{
	                                id: 'ctYarnMaterial4',
	                                name: 'ctYarnMaterial4',
	                                xtype: 'textfield',
	                                fieldLabel: yarnMessage.get('ui.yarn.material') + '4',
	                                anchor: '86%',
									width: '90%',
	                                maxLength: 64,
	                                maxLengthText: message.get('message.edit.toolong'),
									readOnly: true
	                            }]
							
							},{
                                columnWidth: .33,
                                layout: 'form',
                                items: [{
	                                id: 'factoryNameCN',
	                                name: 'factoryNameCN',
	                                xtype: 'textfield',
	                                fieldLabel: fMessage.get('ui.factory.name'),
	                                anchor: '86%',
									width: '90%',
	                                maxLength: 64,
	                                maxLengthText: message.get('message.edit.toolong'),
									readOnly: true
	                            },{
	                                id: 'ctYarnMaterial2',
	                                name: 'ctYarnMaterial2',
	                                xtype: 'textfield',
	                                fieldLabel: yarnMessage.get('ui.yarn.material') + '2',
	                                anchor: '86%',
									width: '90%',
	                                maxLength: 64,
	                                maxLengthText: message.get('message.edit.toolong'),
									readOnly: true
	                            },{
	                                id: 'ctYarnMaterial5',
	                                name: 'ctYarnMaterial5',
	                                xtype: 'textfield',
	                                fieldLabel: yarnMessage.get('ui.yarn.material') + '5',
	                                anchor: '86%',
									width: '90%',
	                                maxLength: 64,
	                                maxLengthText: message.get('message.edit.toolong'),
									readOnly: true
	                            }]
							},{
                                columnWidth: .33,
                                layout: 'form',
                                items: [{
	                                id: 'factoryNameEN',
	                                name: 'factoryNameEN',
	                                xtype: 'textfield',
	                                hideLabel: true,
	                                anchor: '60%',
									width: '60%',
	                                maxLength: 64,
	                                maxLengthText: message.get('message.edit.toolong'),
									readOnly: true
	                            },{
	                                id: 'ctYarnMaterial3',
	                                name: 'ctYarnMaterial3',
	                                xtype: 'textfield',
	                                fieldLabel: yarnMessage.get('ui.yarn.material') + '3',
	                                anchor: '86%',
									width: '90%',
	                                maxLength: 64,
	                                maxLengthText: message.get('message.edit.toolong'),
									readOnly: true
	                            }]
							
							}]
						}]
					},{
								columnWidth:.3,
				                layout: 'form',
								items: [{
		                          id: 'dzColorCode',
		                          name: 'dzColorCode',
		                          xtype: 'textfield',
		                          fieldLabel: dzColorMessage.get('ui.dzcolor.code'),
		                          allowBlank: false,
	                              blankText: message.get('message.edit.noblank'),
		                          anchor: '86%',
								  width: '90%',
		                          maxLength: 256,
                                  listeners: {
                                    'render': {
                                        fn: function(){
                                            Ext.getCmp('dzColorCode').getEl().on('click', function(){
                                                setDZColorCode();
                                            }, this);
                                        },
                                        scope: this
                                  }
                                }
		                      }]
							},{
                        fieldLabel: message.get('message.edit.comment'),
                        name: 'comment',
                        xtype: 'textarea',
                        maxLength: 512,
						width: '90%',
                        maxLengthText: message.get('message.edit.toolong')
                    }],
                    
                    buttons: [{
                        text: message.get('message.edit.save'),
                        handler: function(){
                            if (dzColorForm.getForm().isValid()) {
                            
                            if(idValue == null){
                            	setDZColorCode();
                            }
                            
//          var customerCombo;
//			var ctYarnMaterialCombo;
//			var ctDyeingCombo;
//			var ctFilsTypeCombo;
//			var ctColorFamilyCombo;
//			var ctColorTypeCombo;
//			var ctSeasonNumberCombo;
//			var ctSendBy1Combo;
//			var ctSendBy2Combo;
//			var isApprovied1Combo;
//			var isApprovied2Combo;
								//document.getElementsByName('customerId')[0].value = customerCombo.getValue();
								document.getElementsByName('ctYarnMaterial')[0].value = ctYarnMaterialCombo.getValue();
								document.getElementsByName('ctDyeing')[0].value = ctDyeingCombo.getValue();
								document.getElementsByName('ctFilsType')[0].value = ctFilsTypeCombo.getValue();
								document.getElementsByName('ctColorFamily')[0].value = ctColorFamilyCombo.getValue();
								document.getElementsByName('ctColorType')[0].value = ctColorTypeCombo.getValue();
								document.getElementsByName('ctSeasonNumber')[0].value = ctSeasonNumberCombo.getValue();
								document.getElementsByName('isNew')[0].value = isNewCombo.getValue();
								
							
                                dzColorForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.successful'));
                                        dzColorForm.getForm().reset();
                                    },
                                    failure: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.unsuccessful'));
                                    }
                                });
                            }
                        }
                    }, {
                        text: message.get('message.edit.reset'),
                        handler: function(){
                            dzColorForm.getForm().reset();
                        }
                    }, {
                        text: message.get('message.edit.cancel'),
                        handler: function(){
                            if (startPage != null) {
                                window.location = 'dz_color_list.html?startPage=' + startPage;
                            }
                            else {
                                window.location = 'dz_color_list.html';
                            }
                        }
                    }]
                })
                
                dzColorForm.render('armorDiv');
				
				new Ext.Resizable('customImg', {
                    wrap: true,
                    pinned: true,
                    dynamic: true,
                    handles: 'all',
                    draggable: true
                });
                
                new Ext.Resizable('customImg1', {
                    wrap: true,
                    pinned: true,
                    dynamic: true,
                    handles: 'all',
                    draggable: true
                });
                
                new Ext.Resizable('customImg2', {
                    wrap: true,
                    pinned: true,
                    dynamic: true,
                    handles: 'all',
                    draggable: true
                });
				
                
                if (idValue != null) {
                    document.getElementById('id').value = idValue;
                    dzColorForm.getForm().load({
                        url: '../../servlet/BiDZColorServlet?action=3&id=' + idValue,
                        waitMsg: Ext.LoadMask.prototype.msg,
                        success: function(form, action){
                            document.getElementById('customImg').src =  '../../_temp/' + document.getElementById('photo1Name').value;
							document.getElementById('customImg1').src =  '../../_temp/' + document.getElementById('photo2Name').value;
							document.getElementById('customImg2').src =  '../../_temp/' + document.getElementById('photo3Name').value;
							var realColor = document.getElementById('realColor').value;
							if(realColor){
								document.getElementById('sampleTable').style['backgroundColor'] = '#' + realColor;
							}
							ctColorTypeCombo.fireEvent('select');
                        }
                    });
                }
                
                document.getElementById('customImgSpan').innerHTML = dzColorMessage.get('ui.dzcolor.supplierpic');
                document.getElementById('customImgSpan1').innerHTML = dzColorMessage.get('ui.dzcolor.customerpic');
                document.getElementById('customImgSpan2').innerHTML = orderMessage.get('ui.order.approvedpic');
                
            });
        </script>
</head>
<body>
<div id="armorDiv"></div>
<div style="position: absolute; left: 10%;margin-top: 10px;">
	<p id="customImgSpan" style="text-align: center;"></p>
	<img id="customImg" src="../../_temp/noimage.gif"
		style="width: 250px;" onclick="openImageViewer(this.src);"/>
</div>

<div style="position: absolute; left: 40%;margin-top: 10px;">
	<p id="customImgSpan1" style="text-align: center;"></p>
	<img id="customImg1" src="../../_temp/noimage.gif"
		style="width: 250px;" onclick="openImageViewer(this.src);"/>
</div>

<div style="position: absolute; left: 70%;margin-top: 10px;">
	<p id="customImgSpan2" style="text-align: center;"></p>
	<img id="customImg2" src="../../_temp/noimage.gif"
		style="width: 250px;" onclick="openImageViewer(this.src);"/>
</div>
</body>
</html>
